<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>layer</title>
  <link rel="stylesheet" href="./layui/css/layui.css" />
  <script src="./layui/layui.js"></script>
</head>
<body>
<div id="layerBtn" class="layui-btn">弹出layui按钮</div>
</body>
<div style="display: none" id="biaodan">
  <form class="layui-form" lay-filter="form">
    <div>usrname:<input lay-verify="required" style="width: 30%" type="text" class="layui-input" /></div>
    <div>password:<input style="width: 30%" lay-verify="required" type="text" class="layui-input" /></div>
    <button id="submit" class="layui-btn" lay-submit lay-filter="submit">提交</button>
  </form>
</div>
</html>
<script type="text/html" id="biaodan"></script>
<script>
  // 挂载layui，添加jquery和form 一会我们会用到
  layui.use(['layer', 'jquery', 'form'], function () {
    // 这个时候将挂载到layui中的layer放置到一个变量上面，有助于我们调用
    var layer = layui.layer
    var $ = layui.jquery
    var form = layui.form
    form.render(null, 'form')
    // 首先第一种调用方法就是(采用的是jquery的点击事件)
    $('#layerBtn').on('click', function (e) {
      // 调用的layer弹窗
      layer.open({
        type: 1,
        title: '表单验证',
        area: ['80%', '80%'],//弹框大小  屏幕宽度的80%，高度的80%；
        content: $('#biaodan'), //可以使用$('#id,.class')这种方式来指定模板，可以将其理解为指定一个组件，当然也是可以自己去写的,像'<div>我是一个内容</div>'
        // 打开弹窗的回调函数，用于回显页面数据
        success: function () {
          console.log('我打开了弹窗')
        },
      })
    })
    // 表单提交事件
    form.on('submit(submit)', function (data) {
      console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
      console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
      console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
      return false //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    })
  })
</script>

